<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/logon.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font3/iconfont.css">
</head>
<body>
    <!-- 头部 -->
    <div class="w1200 user-head">
        <div class="logo-box">
            <a href="">
                <img src="./imgs/1.png" alt="">
            </a>
            <span>欢迎登录</span>
        </div>
        <div class="reg">
            <span>没有账号？</span>
            <a href="./register.html" class="ns-text-color">立即注册</a>
        </div>
    </div>
    <!-- 中部 -->
    <div class="ns-main w1200">
        <div class="item">
            <a href="">
                <img src="./imgs/logon1.jpg" alt="">
            </a>
        </div>



        <div class="w1200">
            <div class="login-form">
                <div class="form-head">
                    <div class="tit ns-text-color border clickshow">账号登录</div>
                    <div class="tit clickhide">手机快捷登录</div>
                </div>
                <div class="form-box">
                    <div class="type-box">
                        <div class="input-control">
                            <input id="username" type="text" class="form-control ns-border-color-gray-shade-10" placeholder="手机号/用户名/邮箱">
                            <span></span>
                            <label for="user_name" class="input-left">
                                <i class="iconfont">&#xe6a8</i>
                            </label>
                        </div>
                    </div>
                    <div class="type-box">
                        <div class="input-control">
                            <input id="password" type="password" class="form-control ns-border-color-gray-shade-10" placeholder="请输入密码">
                            <span></span>
                            <label for="user_name" class="input-left">
                                <i class="iconfont">&#xe641</i>
                            </label>
                        </div>
                    </div>
                    <div class="type-box">
                        <div class="input-control">
                            <input id="user_name" type="text" class="form-control ns-border-color-gray-shade-10 form-ewai" placeholder="请输入验证码">
                            <img class="input-control-label-right text-success verifyimg" src="https://www.leishen.cn/captcha?tag=1&amp;send=0.8646830187613521" alt="captcha" onclick="this.src='https://www.leishen.cn/captcha?tag=1'+'&amp;send='+Math.random()">
                        </div>
                    </div>
                </div>
                <div class="form-box2">
                    <div class="type-box">
                        <div class="input-control">
                            <input id="user_name" type="text" class="form-control ns-border-color-gray-shade-10" placeholder="手机号">
                        </div>
                    </div>
                    <div class="type-box">
                        <div class="input-control">
                            <input id="user_name" type="text" class="form-control ns-border-color-gray-shade-10" placeholder="请输入验证码">
                        </div>
                    </div>
                    <div class="type-box">
                        <div class="input-control">
                            <input id="user_name" type="text" class="form-control ns-border-color-gray-shade-10 form-ewai" placeholder="短信效验码">
                            <button class="btn check-code-btn ns-text-color-gray" type="button" id="sendOutCode">获取短信校验码</button>
                        </div>
                    </div>
                </div>
                <div class="forget-paassword">
                    <a href="">忘记密码?</a>
                </div>
                <div class="btn-primary" id="tel">登录</div>
                <div class="coagent">
                     <ul>
                         <li class="extra-r  fl">
                            使用合作账号登录
                            <b></b>
                         </li>
                         <li class="fr">
                             <a href="" title="微信登录授权">
                                 <span>微信</span>
                                 <b class="weixin-icon"></b>
                             </a>
                         </li>
                         <li class="fr">
                            <a href="" title="微信登录授权">
                                <span>微信</span>
                                <b></b>
                                <span class="line">|</span>
                            </a>
                         </li>
                     </ul>
                </div>
            </div>
        </div>
    </div>












    <!-- 底部 -->
    <div class="footerBox"></div>
</body>
<script src="./libs/jquery.js"></script>
<script src="./js/login.js"></script>
<script>
    $(".footerBox").load("http://localhost:3000/public/header.html .dyb-footer")
    const oleft = document.querySelector(".clickshow");
    const oright = document.querySelector(".clickhide");
    const box1 = document.querySelector(".form-box");
    const box2 = document.querySelector(".form-box2");
    oleft.onclick = function(){
        box1.style.display = "block";
        box2.style.display = "none";
        oleft.style.color = "#00eef3"
        oright.style.color = "#000"
    }
    oright.onclick = function(){
        box2.style.display = "block";
        box1.style.display = "none";
        oright.style.color = "#00eef3"
        oleft.style.color = "#000"
    }








var op = 0;
var ot = 0;
otel.oninput = function() {

    var reg = /^[a-z0-9_-]{3,16}$/;
    var flag = reg.test(this.value);
    if (flag) {
        this.nextElementSibling.innerHTML = "通过验证";
        ot = 1;
    } else {
        this.nextElementSibling.innerHTML = "不符合账号的基本格式";
        ot = 0;
    }
    if (ot === 1 && op === 1) {
        osubmit.removeAttribute("disabled")
    } else {
        osubmit.setAttribute("disabled", "disabled")
    }
}
opassword.oninput = function() {

    var reg = /^[a-z0-9_-]{6,18}$/;
    var flag = reg.test(this.value);
    if (flag) {
        this.nextElementSibling.innerHTML = "通过验证";
        op = 1;
    } else {
        this.nextElementSibling.innerHTML = "不符合密码的基本格式";
        op = 0;
    }
    if (ot === 1 && op === 1) {
        osubmit.removeAttribute("disabled")
    } else {
        osubmit.setAttribute("disabled", "disabled")
    }
}
</script>
</html>